<script setup lang="ts">
import WaterFallList from '@/components/waterFallList/index.vue'

</script>
<template>
  <div class="home">
    <!-- 顶部栏 -->
    <van-nav-bar fixed placeholder>
      <template #title>
        <van-field @click="$router.push('/search')" placeholder="搜索框/点击跳转" right-icon="search" readonly />
      </template>
    </van-nav-bar>
    <WaterFallList />
    <!-- <van-skeleton v-for="item in 5" :key="item">
      <template #template>
        <div :style="{ display: 'flex', width: '100%' }">
          <van-skeleton-image />
          <div :style="{ flex: 1, marginLeft: '16px' }">
            <van-skeleton-paragraph row-width="60%" />
            <van-skeleton-paragraph />
            <van-skeleton-paragraph />
            <van-skeleton-paragraph />
          </div>
        </div>
      </template>
    </van-skeleton> -->
  </div>
</template>
<style lang="scss" scoped>
.home {
  :deep(.van-nav-bar__title) {
    max-width: 100% !important;
    .van-field {
      // border: 2px solid #9d9d9d;
      padding: 3px 15px;
      width: 80vw;
      border-radius: 30px;
      background-color: var(--color-background);
    }
  }
}
</style>